<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!--链接式:推荐使用-->
    <link rel="stylesheet" type="text/css" href="./25-失去焦点隐藏.css" />
    <!--导入式-->
    <!-- <style type="text/css">
      @import url('css/style.css');
    </style> -->
  </head>
  <body>
    <div class="wrapper">
      <input type="text" id="anInput" />
      <div id="operateBox">box</div>
    </div>

    <script>
      // // 失去焦点隐藏盒子
      // jd_input.addEventListener('blur', () => {
      //   con.style.display = 'none'
      // })
      // // 得到焦点且文本框不为空就显示盒子
      // jd_input.addEventListener('blur', () => {
      //   if (this.value !== '') {
      //     con.style.display = 'block'
      //   }
      // })
      // const anInput = document.getElementById('anInput')
      // const operateBox = document.getElementById('operateBox')
      // anInput.addEventListener('blur', () => {
      //   operateBox.style.display = 'none'
      //   console.log('隐藏')
      // })

      // anInput.addEventListener('focus', () => {
      //   operateBox.style.display = 'block'
      //   console.log('显示')
      // })
    </script>
  </body>
</html>
